<a href='https://github.com/angular/angular.js/edit/v1.4.x/src/Angular.js?message=docs(ngApp)%3A%20describe%20your%20change...#L1351' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>



<a href='https://github.com/angular/angular.js/tree/v1.4.7/src/Angular.js#L1351' class='view-source pull-right btn btn-primary'>
  <i class="glyphicon glyphicon-zoom-in">&nbsp;</i>View Source
</a>


<header class="api-profile-header">
  <h1 class="api-profile-header-heading">ngApp</h1>
  <ol class="api-profile-header-structure naked-list step-list">
    
    <li>
      - directive in module <a href="api/ng">ng</a>
    </li>
  </ol>
</header>



<div class="api-profile-description">
  <p>Use this directive to <strong>auto-bootstrap</strong> an AngularJS application. The <code>ngApp</code> directive
designates the <strong>root element</strong> of the application and is typically placed near the root element
of the page - e.g. on the <code>&lt;body&gt;</code> or <code>&lt;html&gt;</code> tags.</p>
<p>Only one AngularJS application can be auto-bootstrapped per HTML document. The first <code>ngApp</code>
found in the document will be used to define the root element to auto-bootstrap as an
application. To run multiple applications in an HTML document you must manually bootstrap them using
<a href="api/ng/function/angular.bootstrap"><code>angular.bootstrap</code></a> instead. AngularJS applications cannot be nested within each other.</p>
<p>You can specify an <strong>AngularJS module</strong> to be used as the root module for the application.  This
module will be loaded into the <a href="api/auto/service/$injector"><code>$injector</code></a> when the application is bootstrapped. It
should contain the application code needed or have dependencies on other modules that will
contain the code. See <a href="api/ng/function/angular.module"><code>angular.module</code></a> for more information.</p>
<p>In the example below if the <code>ngApp</code> directive were not placed on the <code>html</code> element then the
document would not be compiled, the <code>AppController</code> would not be instantiated and the <code>{{ a+b }}</code>
would not be resolved to <code>3</code>.</p>
<p><code>ngApp</code> is the easiest, and most common way to bootstrap an application.</p>
<p> 

<div>
  <a ng-click="openPlunkr('examples/example-example47', $event)" class="btn pull-right">
    <i class="glyphicon glyphicon-edit">&nbsp;</i>
    Edit in Plunker</a>

  <div class="runnable-example"
      path="examples/example-example47"
      module="ngAppDemo">

  
    <div class="runnable-example-file" 
      name="index.html"
      language="html"
      type="html">
      <pre><code>&lt;div ng-controller=&quot;ngAppDemoController&quot;&gt;&#10;  I can add: {{a}} + {{b}} =  {{ a+b }}&#10;&lt;/div&gt;</code></pre>
    </div>
  
    <div class="runnable-example-file" 
      name="script.js"
      language="js"
      type="js">
      <pre><code>angular.module(&#39;ngAppDemo&#39;, []).controller(&#39;ngAppDemoController&#39;, function($scope) {&#10;  $scope.a = 1;&#10;  $scope.b = 2;&#10;});</code></pre>
    </div>
  

    <iframe class="runnable-example-frame" src="examples/example-example47/index.html" name="example-example47"></iframe>
  </div>
</div>


</p>
<p>Using <code>ngStrictDi</code>, you would see something like this:</p>
<p> 

<div>
  <a ng-click="openPlunkr('examples/example-example48', $event)" class="btn pull-right">
    <i class="glyphicon glyphicon-edit">&nbsp;</i>
    Edit in Plunker</a>

  <div class="runnable-example"
      path="examples/example-example48"
      ng-app-included="true">

  
    <div class="runnable-example-file" 
      name="index.html"
      language="html"
      type="html">
      <pre><code>&lt;div ng-app=&quot;ngAppStrictDemo&quot; ng-strict-di&gt;&#10;    &lt;div ng-controller=&quot;GoodController1&quot;&gt;&#10;        I can add: {{a}} + {{b}} =  {{ a+b }}&#10;&#10;        &lt;p&gt;This renders because the controller does not fail to&#10;           instantiate, by using explicit annotation style (see&#10;           script.js for details)&#10;        &lt;/p&gt;&#10;    &lt;/div&gt;&#10;&#10;    &lt;div ng-controller=&quot;GoodController2&quot;&gt;&#10;        Name: &lt;input ng-model=&quot;name&quot;&gt;&lt;br /&gt;&#10;        Hello, {{name}}!&#10;&#10;        &lt;p&gt;This renders because the controller does not fail to&#10;           instantiate, by using explicit annotation style&#10;           (see script.js for details)&#10;        &lt;/p&gt;&#10;    &lt;/div&gt;&#10;&#10;    &lt;div ng-controller=&quot;BadController&quot;&gt;&#10;        I can add: {{a}} + {{b}} =  {{ a+b }}&#10;&#10;        &lt;p&gt;The controller could not be instantiated, due to relying&#10;           on automatic function annotations (which are disabled in&#10;           strict mode). As such, the content of this section is not&#10;           interpolated, and there should be an error in your web console.&#10;        &lt;/p&gt;&#10;    &lt;/div&gt;&#10;&lt;/div&gt;</code></pre>
    </div>
  
    <div class="runnable-example-file" 
      name="script.js"
      language="js"
      type="js">
      <pre><code>angular.module(&#39;ngAppStrictDemo&#39;, [])&#10;// BadController will fail to instantiate, due to relying on automatic function annotation,&#10;// rather than an explicit annotation&#10;.controller(&#39;BadController&#39;, function($scope) {&#10;  $scope.a = 1;&#10;  $scope.b = 2;&#10;})&#10;// Unlike BadController, GoodController1 and GoodController2 will not fail to be instantiated,&#10;// due to using explicit annotations using the array style and $inject property, respectively.&#10;.controller(&#39;GoodController1&#39;, [&#39;$scope&#39;, function($scope) {&#10;  $scope.a = 1;&#10;  $scope.b = 2;&#10;}])&#10;.controller(&#39;GoodController2&#39;, GoodController2);&#10;function GoodController2($scope) {&#10;  $scope.name = &quot;World&quot;;&#10;}&#10;GoodController2.$inject = [&#39;$scope&#39;];</code></pre>
    </div>
  
    <div class="runnable-example-file" 
      name="style.css"
      language="css"
      type="css">
      <pre><code>div[ng-controller] {&#10;    margin-bottom: 1em;&#10;    -webkit-border-radius: 4px;&#10;    border-radius: 4px;&#10;    border: 1px solid;&#10;    padding: .5em;&#10;}&#10;div[ng-controller^=Good] {&#10;    border-color: #d6e9c6;&#10;    background-color: #dff0d8;&#10;    color: #3c763d;&#10;}&#10;div[ng-controller^=Bad] {&#10;    border-color: #ebccd1;&#10;    background-color: #f2dede;&#10;    color: #a94442;&#10;    margin-bottom: 0;&#10;}</code></pre>
    </div>
  

    <iframe class="runnable-example-frame" src="examples/example-example48/index.html" name="example-example48"></iframe>
  </div>
</div>


</p>

</div>




<div>
  

  
  <h2>Directive Info</h2>
  <ul>
    
    <li>This directive executes at priority level 0.</li>
    
  </ul>

  
  <h2 id="usage">Usage</h2>
  <div class="usage">
  
    <ul>
    <li>as attribute:
        <pre><code>&lt;ANY&#10;  ng-app=&quot;angular.Module&quot;&#10;  [ng-strict-di=&quot;boolean&quot;]&gt;&#10;...&#10;&lt;/ANY&gt;</code></pre>
      </li>
    
  </div>
  
<section class="api-section">
  <h3>Arguments</h3>

<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        ngApp
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-angular">angular.Module</a>
      </td>
      <td>
        <p>an optional application
  <a href="api/ng/function/angular.module">module</a> name to load.</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        ngStrictDi
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-boolean">boolean</a>
      </td>
      <td>
        <p>if this attribute is present on the app element, the injector will be
  created in &quot;strict-di&quot; mode. This means that the application will fail to invoke functions which
  do not use explicit function annotation (and are thus unsuitable for minification), as described
  in <a href="guide/di">the Dependency Injection guide</a>, and useful debugging info will assist in
  tracking down the root of these bugs.</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

</section>
  


  
</div>


